<!DOCTYPE html>
<html lang="en-US">
<head>
<title>SmartMenus jQuery Website Menu - jQuery Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />




<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery init -->
<script type="text/javascript">
	$(function() {
		$('#main-menu').smartmenus({
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8
		});
	});
</script>




<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />

<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />

<!-- #main-menu config - instance specific stuff not covered in the theme -->
<!-- Put this in an external stylesheet if you want the media query to work in IE8 (e.g. where the rest of your page styles are) -->
<style type="text/css">
	@media screen and (min-width: 768px) {
		#main-menu {
			position:relative;
			z-index:9999;
			width:auto;
		}
		#main-menu ul {
			width:12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
		}
	}
</style>

<!-- Respond.js for IE8 support of media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->




<!-- YOU DO NOT NEED THIS - demo page content styles -->
<link href="../libs/demo-assets/demo.css" rel="stylesheet" type="text/css" />




</head>

<body>




<nav role="navigation">
  <!-- Sample menu definition -->
  <ul id="main-menu" class="sm sm-blue">
    <li><a href="http://www.smartmenus.org/">Home</a></li>
    <li><a href="http://www.smartmenus.org/about/">About</a>
      <ul>
        <li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
        <li><a href="http://www.smartmenus.org/about/themes/">Themes</a></li>
        <li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
        <li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
          <ul>
            <li><a href="http://vadikom.com/about/">About Vadikom</a></li>
            <li><a href="http://vadikom.com/projects/">Projects</a></li>
            <li><a href="http://vadikom.com/services/">Services</a></li>
            <li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
          </ul>
        </li>
        <li><a href="http://www.smartmenus.org/about/old-smartmenus-versions/">Old SmartMenus versions</a></li>
      </ul>
    </li>
    <li><a href="http://www.smartmenus.org/download/">Download</a></li>
    <li><a href="http://www.smartmenus.org/support/">Support</a>
      <ul>
        <li><a href="http://www.smartmenus.org/support/premium-support/">Premium support</a></li>
        <li><a href="http://www.smartmenus.org/support/forums/">Forums</a></li>
      </ul>
    </li>
    <li><a href="http://www.smartmenus.org/docs/">Docs</a></li>
    <li><a href="#">Sub test</a>
      <ul>
        <li><a href="#">Dummy item</a></li>
        <li><a href="#">Dummy item</a></li>
        <li><a href="#" class="disabled">Disabled menu item</a></li>
        <li><a href="#">Dummy item</a></li>
        <li><a href="#">more...</a>
          <ul>
            <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">more...</a>
              <ul>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#" class="current">A 'current' class item</a></li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">more...</a>
                  <ul>
                    <li><a href="#">subMenusMinWidth</a></li>
                    <li><a href="#">10em</a></li>
                    <li><a href="#">forced.</a></li>
                  </ul>
                </li>
                <li><a href="#">Dummy item</a></li>
                <li><a href="#">Dummy item</a></li>
              </ul>
            </li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
            <li><a href="#">Dummy item</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Mega menu</a>
      <ul class="mega-menu">
        <li>
          <!-- The mega drop down contents -->
          <div style="width:400px;max-width:100%;">
            <div style="padding:5px 24px;">
              <p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
              <p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
  	  </div>
  	</div>
        </li>
      </ul>
    </li>
  </ul>
</nav>




<!-- =============================================================================== -->
<!-- ================= YOU DO NOT NEED ANYTHING AFTER THIS COMMENT ================= -->
<!-- =============================================================================== -->



<div class="columns">
 <div class="left-column">
  <div id="content">
   <h1>SmartMenus</h1>
   <p>jQuery website menu plugin. Responsive and accessible list-based website menus that work on all devices.</p>
   <ul>
    <li><a href="http://www.smartmenus.org/docs/">Getting started and API documentation</a></li>
    <li><a href="https://github.com/vadikom/smartmenus/issues">Bugs and issues</a></li>
    <li><a href="http://www.smartmenus.org/forums/">Support forums</a></li>
   </ul>
   <h2>Examples</h2>
   <ul>
    <li><a href="keyboard-navigation.html">Keyboard Addon</a></li>
    <li><a href="bootstrap-navbar.html">Bootstrap Addon (Navbar)</a></li>
    <li><a href="bootstrap-navbar-static-top.html">Bootstrap Addon (Navbar static top)</a></li>
    <li><a href="bootstrap-navbar-fixed-top.html">Bootstrap Addon (Navbar fixed top)</a></li>
    <li><a href="bootstrap-navbar-fixed-bottom.html">Bootstrap Addon (Navbar fixed bottom)</a></li>
   </ul>
  </div>
 </div>

 <div class="right-column">

  <script type="text/javascript" src="../libs/demo-assets/themes-switcher.js"></script>

 </div>
</div>




</body>
</html>